<template>
    <div class="container">
        <div class="a box" style="display: flex; flex-direction: column">
            <div class="box_top">
                <p class="box_title">
                    <span>待办事项</span>
                </p>
            </div>
            <div class="totalA" v-if="userInfo.is_supplier === 0 && userInfo.is_consignor === 0">
                <div @click="router.push('/purchaseManage')">
                    <span>
                        <img src="../assets/dcg2.png" alt="" />
                    </span>
                    <p>
                        <span>待采购</span>
                        <span>{{ todoStatistics.unPurchaseQuantity }}</span>
                    </p>
                </div>
                <div @click="router.push('/supply/order')">
                    <span><img src="../assets/dfh2.png" alt="" /></span>
                    <p>
                        <span>待发货</span>
                        <span>{{ todoStatistics.unShipQuantity }}</span>
                    </p>
                </div>
                <div @click="router.push('/yanshou')">
                    <span><img src="../assets/dys.png" alt="" /></span>
                    <p>
                        <span>待验收</span>
                        <span>{{ todoStatistics.unYsQuantity }}</span>
                    </p>
                </div>
                <div @click="router.push('/settlement')">
                    <span><img src="../assets/djs.png" alt="" /></span>
                    <p>
                        <span>待结算</span>
                        <span>{{ todoStatistics.unSettleQuantity }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="b box">
            <div class="box_top">
                <p class="box_title">
                    <span>公告</span>
                </p>
                <p class="newsMore">
                    <span>更多</span>
                </p>
            </div>
            <ul class="newsCont">
                <li v-for="(item, index) in 4" :key="index">这里公告title</li>
            </ul>
        </div>
        <div class="d box">
            <div class="box_top">
                <p class="box_title">
                    <span>操作指南</span>
                </p>
            </div>
        </div>
        <div class="c box" style="display: flex; flex-direction: column">
            <div class="box_top">
                <p class="box_title">
                    <span>待办审批</span>
                </p>
                <div class="day7">
                    <span>近7天待办审批趋势</span>
                    <!-- <p>
                        <span>
                            <em class="em1"></em>
                            <span>待审批</span>
                        </span>
                        <span>
                            <em class="em2"></em>
                            <span>已审批</span>
                        </span>
                        <span>
                            <em class="em3"></em>
                            <span>已驳回</span>
                        </span>
                    </p> -->
                </div>
            </div>
            <a-row style="flex: 1">
                <template v-if="isLoading">
                    <a-col :span="24" style="display: flex; flex-direction: column; justify-content: center">
                        <a-spin />
                    </a-col>
                </template>
                <template v-else>
                    <a-col :span="8" class="leftD">
                        <p>
                            <span>待审批</span>
                            <span>{{ totalDate[0] }}</span>
                        </p>
                        <p>
                            <span>已审批</span>
                            <span>{{ totalDate[1] }}</span>
                        </p>
                        <p>
                            <span>已驳回</span>
                            <span>{{ totalDate[2] }}</span>
                        </p>
                    </a-col>
                    <!-- 曲线 -->
                    <a-col :span="16" style="display: flex; flex-direction: column; justify-content: flex-end">
                        <div id="container" style="width: 100%; height: 95%"></div>
                    </a-col>
                </template>
            </a-row>
        </div>
        <a-modal v-model:visible="companyModal.show" width="1000px" title="供应商信息" :closable="false" :mask-closable="false" @ok="handleOk">
            <a-form ref="formRef" :model="companyModal.info" v-bind="{ labelCol: { style: { width: '100px' } } }" :rules="companyModal.formRules">
                <table cellspacing="0" cellpadding="0" style="width: 100%">
                    <tr>
                        <td style="font-size: 14px; font-weight: bold; text-align: center" colspan="3">
                            <div style="margin-bottom: 10px">基本信息</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <a-form-item label="公司名称" name="company_name">
                                <a-input v-model:value="companyModal.info.company_name" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="供应商类别" name="supplier_type">
                                <a-select
                                    v-model:value="companyModal.info.supplier_type"
                                    mode="multiple"
                                    :options="supplierTypeOptions"
                                    option-filter-prop="label"
                                    :disabled="companyModal.infoReadOnly"
                                ></a-select>
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="公司性质" name="company_type">
                                <a-select v-model:value="companyModal.info.company_type" :options="companyTypeOptions" option-filter-prop="label" :disabled="companyModal.infoReadOnly"></a-select>
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="专业" name="major">
                                <a-select v-model:value="companyModal.info.major" mode="multiple" :options="majorOptions" option-filter-prop="label" :disabled="companyModal.infoReadOnly"></a-select>
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <a-form-item label="经营范围" name="supplier_business_scope">
                                <a-textarea v-model:value="companyModal.info.supplier_business_scope" placeholder="请输入经营范围" />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="font-size: 14px; font-weight: bold; text-align: center">
                            <div style="margin-bottom: 10px">联系信息</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="法定代表人" name="legal_person">
                                <a-input v-model:value="companyModal.info.legal_person" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="联系方式" name="contacts_tel">
                                <a-input v-model:value="companyModal.info.contacts_tel" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="法人证件类型" name="legal_person_idcard_type">
                                <a-select v-model:value="companyModal.info.legal_person_idcard_type" placeholder="请选择证件类型" :options="idcardTypeOptions" option-filter-prop="label"></a-select>
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="法人证件号" name="legal_person_idcard">
                                <a-input v-model:value="companyModal.info.legal_person_idcard" />
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="证件附件" name="legal_person_idcard_file_path" :rules="{ required: companyModal.info.legal_person_idcard_type === 2, message: '请提交法人证件附件' }">
                                <a-upload
                                    v-model:file-list="companyModal.info.legal_person_idcard_file_path"
                                    name="upload"
                                    :action="`${baseURL}/contract/upload`"
                                    :show-upload-list="true"
                                    :headers="{ Authorization: `Bearer ${proxy.$cookies.get('token')}` }"
                                    :before-upload="beforeUpload"
                                    @change="changeLegalPersonUpload"
                                >
                                    <a-button>
                                        <template v-if="companyModal.uploading">
                                            <loading-outlined />
                                            上传中...
                                        </template>
                                        <template v-else>
                                            <import-outlined />
                                            上传附件
                                        </template>
                                    </a-button>
                                </a-upload>
                                <span style="color: #ccc">
                                    提交证件文件
                                    <span style="color: red">PNG,JPG,DOC,EXCEL,PDF</span>
                                    文件
                                </span>
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="是否是委托人" name="is_consignor">
                                <a-switch v-model:checked="companyModal.info.is_consignor" :checked-value="1" :un-checked-value="0" disabled />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="font-size: 14px; font-weight: bold; text-align: center">
                            <div style="margin-bottom: 10px">登录信息</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="登录账号" name="username">
                                <a-input v-model:value="companyModal.info.username" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                        <td colspan="2">
                            <a-form-item label="登录手机号" name="mobile">
                                <a-input v-model:value="companyModal.info.mobile" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="font-size: 14px; font-weight: bold; text-align: center">
                            <div style="margin-bottom: 10px">开票信息</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="户名" name="company_name">
                                <a-input v-model:value="companyModal.info.company_name" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="社会信用代码" name="company_code">
                                <a-input v-model:value="companyModal.info.company_code" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="地址" name="company_address">
                                <a-input v-model:value="companyModal.info.company_address" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="电话" name="phone">
                                <a-input v-model:value="companyModal.info.phone" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="开户行" name="account_bank">
                                <a-input v-model:value="companyModal.info.account_bank" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="银行账号" name="company_account">
                                <a-input v-model:value="companyModal.info.company_account" :disabled="companyModal.infoReadOnly" />
                            </a-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="font-size: 14px; font-weight: bold; text-align: center">
                            <div style="margin-bottom: 10px">证件及有效期</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a-form-item label="证件类型" name="certificate_type" :rules="{ required: true, message: '请选择证件类型' }">
                                <a-select
                                    v-model:value="companyModal.info.certificate_type"
                                    mode="multiple"
                                    :show-search="true"
                                    placeholder="请选择证件类型"
                                    :options="certificateTypeOptions"
                                    option-filter-prop="label"
                                ></a-select>
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="证件文件信息" name="certificate_file_path" :rules="{ required: true, message: '请上传证件文件' }">
                                <a-upload
                                    v-model:file-list="companyModal.info.certificate_file_path"
                                    name="upload"
                                    :action="`${baseURL}/contract/upload`"
                                    :show-upload-list="true"
                                    :headers="{ Authorization: `Bearer ${proxy.$cookies.get('token')}` }"
                                    :before-upload="beforeUpload"
                                    @change="changeUpload"
                                >
                                    <a-button>
                                        <template v-if="companyModal.uploading">
                                            <loading-outlined />
                                            上传中...
                                        </template>
                                        <template v-else>
                                            <import-outlined />
                                            上传附件
                                        </template>
                                    </a-button>
                                </a-upload>
                                <span style="color: #ccc">
                                    提交证件文件
                                    <span style="color: red">PNG,JPG,DOC,EXCEL,PDF</span>
                                    文件
                                </span>
                            </a-form-item>
                        </td>
                        <td>
                            <a-form-item label="证件有效期" name="certificate_validity" :rules="{ required: true, message: '请输入有效期' }">
                                <a-checkbox v-model:checked="companyModal.info.certificate_perpetuity" @change="changeCertificatePerpetuity">长期</a-checkbox>
                                <a-date-picker v-model:value="companyModal.info.certificate_validity" value-format="YYYY-MM-DD" />
                            </a-form-item>
                        </td>
                    </tr>
                    <template v-if="companyModal.info.status === -2">
                        <tr>
                            <td colspan="3" style="font-size: 14px; font-weight: bold; text-align: center; color: red">
                                <div style="margin-bottom: 10px">驳回理由</div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <a-form-item label="驳回理由" name="phone">
                                    <a-textarea v-model:value="companyModal.info.reject_reason" disabled :auto-size="{ minRows: 4, maxRows: 6 }" />
                                </a-form-item>
                            </td>
                        </tr>
                    </template>
                </table>
            </a-form>
            <template #footer>
                <a-button type="primary" :loading="companyModal.loading || companyModal.uploading" @click="handleOk">提交</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script setup>
import { Chart } from '@antv/g2';
import { ImportOutlined, LoadingOutlined, UserOutlined } from '@ant-design/icons-vue';
import { getCurrentInstance, onMounted, ref } from 'vue';
import { post } from '../utils';
import { userStore } from '../store';
import { baseURL } from '@/utils/request.js';
import dayjs from 'dayjs';
import { Modal } from 'ant-design-vue';
import { state } from '@antv/g2plot/lib/adaptor/common';
const { proxy } = getCurrentInstance();
const store = userStore();
const userInfo = store.info;
import { useRouter } from 'vue-router';
const router = useRouter();
const lineChart = ref(null);

const todoStatistics = ref({
    unPurchaseQuantity: 0,
    unShipQuantity: 0,
    unYsQuantity: 0,
    unSettleQuantity: 0,
});
const certificateTypeOptions = ref([]);
const uploading = ref(false);
const formRef = ref(null);
const companyModal = ref({
    show: false,
    info: {},
    uploading: false,
    infoReadOnly: false,
    formRules: {
        legal_person: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
        legal_person_idcard_type: [
            {
                required: true,
                message: '请输入选择法人证件类型',
                trigger: 'blur',
            },
        ],
        legal_person_idcard: [{ required: true, message: '请输入法人证件号', trigger: 'blur' }],
        company_code: [{ required: true, message: '请输入社会信用代码', trigger: 'blur' }],
        company_account: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
        account_bank: [{ required: true, message: '请输入账户', trigger: 'blur' }],
        company_name: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
        supplier_type: [{ required: true, message: '请选择供应商类别', trigger: 'blur' }],
        company_type: [{ required: true, message: '请选择公司性质', trigger: 'blur' }],
        major: [{ required: true, message: '请选择专业', trigger: 'blur' }],
        username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        client: [{ required: true, message: '请输入委托人', trigger: 'blur' }],
        supplier_business_scope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
    },
});
//1生产制造单位2贸易单位3代理经销4服务提供
const supplierTypeOptions = [
    {
        value: 1,
        label: '生产制造单位',
    },
    {
        value: 2,
        label: '贸易单位',
    },
    {
        value: 3,
        label: '代理经销',
    },
    {
        value: 4,
        label: '服务提供',
    },
];
//1有限公司2股份公司3央企4国企5国资委
const companyTypeOptions = [
    {
        value: 1,
        label: '有限公司',
    },
    {
        value: 2,
        label: '股份公司',
    },
    {
        value: 3,
        label: '央企',
    },
    {
        value: 4,
        label: '国企',
    },
    {
        value: 5,
        label: '国资委',
    },
];
//majorOptions 1劳务作业2专业作业3材料供应4机械租赁5服务提供6回收处理
const majorOptions = [
    {
        value: 1,
        label: '劳务作业',
    },
    {
        value: 2,
        label: '专业作业',
    },
    {
        value: 3,
        label: '材料供应',
    },
    {
        value: 4,
        label: '机械租赁',
    },
    {
        value: 5,
        label: '服务提供',
    },
    {
        value: 6,
        label: '回收处理',
    },
];
const idcardTypeOptions = [
    {
        value: 1,
        label: '身份证',
    },
    {
        value: 2,
        label: '其他',
    },
];
const waitModal = ref(null);
post('dictionary', { root_id: '1039' }).then(data => {
    certificateTypeOptions.value = data.map(d => {
        return {
            value: d.id,
            label: d.name,
        };
    });
});
onMounted(async () => {
    todoStatistics.value = await post('dataBoard/todo', {});
    if (userInfo.status === -2 || (userInfo.is_supplier && !userInfo.certificate_file_path)) {
        if (userInfo.status !== -2) {
            companyModal.value.infoReadOnly = true;
        }
        companyModal.value.show = true;
        companyModal.value.info = JSON.parse(JSON.stringify(userInfo));
        companyModal.value.info.supplier_type = companyModal.value.info.supplier_type?.split(',').map(item => parseInt(item));
        companyModal.value.info.company_type = companyModal.value.info.company_type?.split(',').map(item => parseInt(item));
        companyModal.value.info.major = companyModal.value.info.major?.split(',').map(item => parseInt(item));
        companyModal.value.info.certificate_type = companyModal.value.info.certificate_type?.split(',').map(item => parseInt(item));
        companyModal.value.info.certificate_perpetuity = companyModal.value.info.certificate_validity === '9999-12-31';
        if (companyModal.value.info.legal_person_idcard_file_path) {
            companyModal.value.info.legal_person_idcard_file_path = [
                {
                    url: companyModal.value.info.legal_person_idcard_file_path,
                    name: '附件',
                },
            ];
        }
    } else if (userInfo.status === -1) {
        waitModal.value = Modal.warn({
            title: '提示',
            content: '账号审核中，请耐心等待',
            okType: 'danger',
            okButtonProps: {
                disabled: true,
            },
        });
    }
    await getDataFn();
    updateLineChart();
});
const closeWaitModal = () => {
    waitModal.value?.destroy();
};

const params = {
    // status: 0, // 0 ---待审核  2 -- 已审核    -1 --- 驳回
    page: 1,
    page_size: 200,
};
const isLoading = ref(true);
const totalDate = ref([]); // 总数据
const countProps = (arr, prop) => {
    return arr.reduce((acc, curr) => {
        const key = curr[prop];
        acc[key] = (acc[key] || 0) + 1;
        return acc;
    }, {});
};
const getDates = () => {
    const today = new Date();
    const dates = [];
    for (let i = 0; i < 7; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i); // 减去i天
        const month = ('0' + (date.getMonth() + 1)).slice(-2); // 保证月份为两位数
        const day = ('0' + date.getDate()).slice(-2); // 保证日期为两位数
        dates.push(month + '-' + day);
    }
    return dates;
};
// 数据 处理
const computerDataFn = (data, typeStr) => {
    const rData = [];
    const arrD = getDates();
    let arrNew = [];
    data.forEach(element => {
        arrNew.push({
            id: element.id,
            create_time: element.create_time.slice(5, 10), // 2024-07-25T10:59:55.000Z
        });
    });
    const aaa = countProps(arrNew, 'create_time');
    arrD.forEach(item => {
        rData.push({
            time: item,
            number: aaa[item] || 0,
            stateStr: typeStr,
        });
    });
    return rData;
};
const getDataFn = async () => {
    isLoading.value = true;
    const data1 = await post('workflow', { ...params, status: 0 });
    totalDate.value.push(data1.total);
    const data2 = await post('workflow', { ...params, status: 2 });
    totalDate.value.push(data2.total);
    const data3 = await post('workflow', { ...params, status: -1 });
    totalDate.value.push(data3.total);
    const arr1 = computerDataFn(data1.data, '待审批');
    const arr2 = computerDataFn(data2.data, '已审批');
    const arr3 = computerDataFn(data3.data, '已驳回');
    isLoading.value = false;
    return [...arr1, ...arr2, ...arr3];
};

const getUserInfo = async () => {
    await store.setInfo();
    const userInfo = store.info;
    if (userInfo.status === 0) {
        closeWaitModal();
        Modal.error({
            title: '提示',
            content: '账号已被禁用',
            okType: 'danger',
            okButtonProps: {
                disabled: true,
            },
        });
    } else if (userInfo.status === 1) {
        closeWaitModal();
        proxy.$message.success('账号审核通过');
    } else if (userInfo.status === -1) {
        setTimeout(() => {
            getUserInfo();
        }, 2000);
    }
};
const updateLineChart = async () => {
    const data = await getDataFn();
    // const data = [
    //     { time: '07/19', stateStr: '待审批', number: 7 },
    //     { time: '07/19', stateStr: '已审批', number: 8 },
    //     { time: '07/19', stateStr: '已驳回', number: 9 },

    //     { time: '07/20', stateStr: '待审批', number: 10 },
    //     { time: '07/20', stateStr: '已审批', number: 15 },
    //     { time: '07/20', stateStr: '已驳回', number: 2 },

    //     { time: '07/21', stateStr: '待审批', number: 16 },
    //     { time: '07/21', stateStr: '已审批', number: 10 },
    //     { time: '07/21', stateStr: '已驳回', number: 20 },

    //     { time: '07/22', stateStr: '待审批', number: 11 },
    //     { time: '07/22', stateStr: '已审批', number: 5 },
    //     { time: '07/22', stateStr: '已驳回', number: 9 },

    //     { time: '07/23', stateStr: '待审批', number: 10 },
    //     { time: '07/23', stateStr: '已审批', number: 6 },
    //     { time: '07/23', stateStr: '已驳回', number: 8 },

    //     { time: '07/24', stateStr: '待审批', number: 10 },
    //     { time: '07/24', stateStr: '已审批', number: 6 },
    //     { time: '07/24', stateStr: '已驳回', number: 8 },

    //     { time: '07/25', stateStr: '待审批', number: 12 },
    //     { time: '07/25', stateStr: '已审批', number: 7 },
    //     { time: '07/25', stateStr: '已驳回', number: 6 },
    // ];

    const chart = new Chart({
        container: 'container',
        autoFit: true,
    });

    chart.data(data.reverse());
    chart.scale({
        time: {
            range: [0, 1],
        },
        number: {
            nice: true,
        },
    });
    chart.tooltip({
        showCrosshairs: true,
        shared: true,
    });

    chart.axis('number', {
        label: {
            formatter: val => {
                return val + '';
            },
        },
    });
    chart.axis('time', {
        label: {
            formatter: val => {
                return val.replace('-', '/');
            },
        },
    });
    chart.legend({
        position: 'top-right',
        marker: (name, index, item) => {
            return {
                style: {},
            };
        },
    });
    chart.line().position('time*number').color('stateStr').shape('smooth');

    chart.point().position('time*number').color('stateStr').shape('circle');
    // chart.animate({
    //     enter: {
    //         animation: 'fadeIn', // 动画名称
    //         easing: 'easeQuadIn', // 动画缓动效果
    //         delay: 10000, // 动画延迟执行时间
    //         duration: 600, // 动画执行时间
    //     },
    // });
    chart.render();
};
const beforeUpload = file => {
    companyModal.value.uploading = true;
    if (!['image/png', 'image/jpeg', 'application/pdf', 'application/vnd.ms-excel', 'application/msword'].includes(file.type)) {
        proxy.$message.error('只能上传PNG,JPG,DOC,EXCEL,PDF文件');
        companyModal.value.uploading = false;
        return false;
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
        proxy.$message.error('只能上传10MB以下文件');
        companyModal.value.uploading = false;
        return false;
    }
};
const changeUpload = ({ file }) => {
    if (file.status === 'done') {
        companyModal.value.info.certificate_file_path = [
            {
                name: file.name,
                url: file.response.data.url,
            },
        ];
        companyModal.value.uploading = false;
        companyModal.value.info.certificate_file_path = companyModal.value.info.certificate_file_path.filter(item => item.url);
        proxy.$message.success('上传成功');
    }
    if (!file.status) {
        companyModal.value.info.certificate_file_path = companyModal.value.info.certificate_file_path.filter(item => item.url);
    }
};
const changeLegalPersonUpload = ({ file }) => {
    if (file.status === 'done') {
        companyModal.value.info.legal_person_idcard_file_path = [
            {
                name: file.name,
                url: file.response.data.url,
            },
        ];
        companyModal.value.uploading = false;
        proxy.$message.success('上传成功');
    }
};
const changeCertificatePerpetuity = () => {
    if (companyModal.value.info.certificate_perpetuity) {
        companyModal.value.info.certificate_validity = '9999-12-31';
    } else {
        companyModal.value.info.certificate_validity = dayjs(new Date()).format('YYYY-MM-DD');
    }
};

const handleOk = async () => {
    formRef.value
        .validate()
        .then(() => {
            proxy.$message.destroy();
            const params = { ...companyModal.value.info };
            if (params.certificate_file_path) params.certificate_file_path = JSON.stringify(params.certificate_file_path);
            params.certificate_type = params.certificate_type.join(',');
            params.department_ids = params.department_ids?.join(',');
            params.supplier_type = params.supplier_type?.join(',');
            params.major = params.major?.join(',');
            params.company_type = params.company_type?.join(',');
            if (params.legal_person_idcard_file_path && params.legal_person_idcard_file_path.length) {
                params.legal_person_idcard_file_path = params.legal_person_idcard_file_path[0].url;
            }
            if (params.status === -2) {
                params.status = -1;
            }
            if (params.legal_person_idcard_type === 1) {
                if (!params.legal_person_idcard.match(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)) {
                    proxy.$message.error('请输入正确的身份证号码');
                    return;
                }
            }
            post('user/save', params)
                .then(() => {
                    proxy.$message.success('信息编辑成功', 1).then(async () => {
                        companyModal.value.show = false;
                        companyModal.value.info = {};
                        getUserInfo();
                    });
                })
                .catch(err => {
                    proxy.$message.error(err);
                });
        })
        .catch(err => {
            console.log(err);
        });
};
</script>

<style scoped lang="scss">
.container {
    margin: 10px;
    height: calc(100% - 86px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px 10px;
    box-sizing: border-box;
    grid-template-areas:
        'a a a a a b b'
        'c c c c c d d'
        'c c c c c d d';
}
.a {
    grid-area: a;
}
.b {
    grid-area: b;
}
.c {
    grid-area: c;
}
.d {
    grid-area: d;
}
.box {
    background-color: white;
    padding: 30px;
    border-radius: 5px;
}

.totalA {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: center;
    gap: 20px 20px;
    & > div {
        color: #fff;
        border-radius: 8px;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        cursor: pointer;
        height: 140px;
        & > span {
            img {
                width: 32px;
                height: 32px;
            }
        }
        & > p {
            padding-top: 14px;
            display: flex;
            flex-direction: column;
            & > span:nth-of-type(1) {
                font-size: 15px;
            }
            & > span:nth-of-type(2) {
                font-size: 32px;
                line-height: 32px;
            }
        }
    }
    & > div:nth-of-type(1) {
        background: url('../assets/bgLight.png') right -40px top -20px no-repeat, linear-gradient(20deg, #fe86d9, #ee73a3);
        background-size: 60%, 100%;
    }
    & > div:nth-of-type(2) {
        background: url('../assets/bgLight.png') right -40px top -20px no-repeat, linear-gradient(20deg, #bf89f8, #b474f5);
        background-size: 60%, 100%;
    }
    & > div:nth-of-type(3) {
        background: url('../assets/bgLight.png') right -40px top -20px no-repeat, linear-gradient(20deg, #6994e5, #687be7);
        background-size: 60%, 100%;
    }
    & > div:nth-of-type(4) {
        background: url('../assets/bgLight.png') right -40px top -20px no-repeat, linear-gradient(20deg, #feaf86, #fea29f);
        background-size: 60%, 100%;
    }
}
.total {
    flex: 1;
    box-sizing: border-box;
    .statistics {
        .icon {
            padding-left: 10px;
            .svg-icon {
                width: 25px;
                height: 25px;
            }
        }
        .content {
            width: 100%;
            text-align: center;
            .num {
                line-height: 25px;
                font-weight: bold;
                font-size: 20px;
            }
            .title {
                line-height: 25px;
                color: #afafaf;
                font-size: 13px;
            }
        }
    }
    .num {
        font-size: 40px;
        line-height: 50px;
        flex: 1;
    }

    :deep(.ant-card-head) {
        border: 0;
    }

    :deep(.ant-card-small > .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title) {
        padding: 12px 0;
        font-weight: 400;
        font-size: 14px;
        color: #666;
    }

    :deep(.ant-card-body) {
        display: flex;
        flex-direction: column;

        img {
            width: 100%;
            height: 30px;
        }
    }
}
.box_top {
    display: flex;
    justify-content: space-between;
    .box_title {
        display: flex;
        span {
            font-family: '微软雅黑', 'Courier New', Courier, monospace;
            font-size: 18px;
            color: #111;
        }
    }
    .day7 {
        & > span {
            font-family: '微软雅黑', 'Courier New', Courier, monospace;
            font-size: 18px;
            color: #111;
        }
        & > p {
            margin-top: 4px;
            display: flex;
            font-size: 12px;
            color: #888;
            margin-bottom: 0px !important;

            & > span {
                padding-right: 10px;
                display: flex;
                align-items: center;
                em {
                    width: 6px;
                    height: 6px;
                    box-sizing: border-box;
                    border-radius: 50%;
                    margin-right: 4px;
                }
                .em1 {
                    background-color: #bb81f7;
                }
                .em2 {
                    background-color: #698fe5;
                }
                .em3 {
                    background-color: #f89b7f;
                }
            }
        }
    }
}
.leftD {
    display: flex;
    flex-direction: column;
    padding-right: 40px;
    padding-top: 30px;
    & > p {
        border-radius: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        justify-content: center;
        & > span:nth-of-type(1) {
            font-size: 14px;
        }
        & > span:nth-of-type(2) {
            font-size: 36px;
            line-height: 40px;
        }
    }
    & > p:nth-of-type(1) {
        background: url('../assets/dsp.png') no-repeat right -10px center, #faf7fe;
        & > span:nth-of-type(2) {
            color: #a172d2;
        }
    }
    & > p:nth-of-type(2) {
        background: url('../assets/ysp.png') no-repeat right -10px center, #f2f4ff;
        & > span:nth-of-type(2) {
            color: #6282d5;
        }
    }
    & > p:nth-of-type(3) {
        background: url('../assets/yph.png') no-repeat right -10px center, #fff6f5;
        & > span:nth-of-type(2) {
            color: #ee845c;
        }
    }
}
.newsMore {
    color: #1890ff;
    cursor: pointer;
}
.newsCont {
    list-style: none;
    padding: 0px;
    li {
        padding: 10px 0px;
        color: #888;
        cursor: pointer;
        border-bottom: 1px solid rgba($color: #aeaeae, $alpha: 0.2);
    }
    li:hover {
        color: #1890ff;
    }
}
</style>
